<!DOCTYPE html>
<html>
<head>
    <#include "/header.html">
</head>
<style>
  .mod-pay__notice .el-form-item{
    margin-bottom: 0px;
  }
    el-tree {
        min-width:100%;
        font-size:14px;
        display: inline-block;;
    }
    .tree {
        overflow-y:scroll;
        overflow-x: auto;
        height: 200px;
        width:200px;
    }
   
</style>
<body>
<div v-cloak class="aui-wrapper aui-page__iframe">
  <div class="aui-content__wrapper">
    <div class="aui-content">
      <el-card shadow="never" class="aui-card--fill">
        <div class="mod-pay__notice">
          <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" style="display:flex;align-items: center;margin-bottom: 20px;">
          <el-form-item prop="merchantname"  class="dept-list">
			        <el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start" trigger="click">
			        <div class='tree'>
			          <el-tree
			            :data="deptList"
			            :props="{ label: 'name', children: 'children' }"
			            node-key="id"
			            ref="deptListTree"
			            :highlight-current="true"
			            :expand-on-click-node="false"
			            accordion
			            @current-change="deptListTreeCurrentChangeHandle">
                </el-tree>
                </div>
                <el-input  slot="reference" v-model="dataForm.merchantname" v-popover:deptListPopover  clearable @clear="clear" :placeholder="$t('dept.name')"></el-input>
			        </el-popover>
       			</el-form-item>
       			 <el-form-item>
              <el-input v-model="dataForm.noticeTitle" placeholder="公告标题" clearable size="medium"></el-input>
            </el-form-item>
               <el-form-item>
              <el-date-picker v-model="dataForm.starttime" type="datetime" value-format="timestamp" placeholder="请选择开始日期" size="medium" :picker-options="pickerOptions"></el-date-picker>               
            </el-form-item>
            <div class="date-line">-</div>
            <el-form-item>
              <el-date-picker v-model="dataForm.endtime" type="datetime" value-format="timestamp" placeholder="请选择结束日期" size="medium" :picker-options="pickerOptions"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button @click="getDataList()">{{ $t('query') }}</el-button>
            </el-form-item>
           <!--  <el-form-item>
              <el-button type="info" @click="exportHandle()">{{ $t('export') }}</el-button>
            </el-form-item> -->
            <el-form-item>
              <el-button v-if="$hasPermission('pay:notice:save')" type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
            </el-form-item>
            <el-form-item>
              <el-button v-if="$hasPermission('pay:notice:delete')" type="danger" @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle" style="width: 100%;">
            <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                  <el-table-column prop="configtype" label="公告类型" header-align="center" align="center">
                 <template slot-scope="scope">
          			<!-- <span>{{scope.row.configtype | formatConfigtype}}</span> -->
          			<el-tag v-if="scope.row.noticeType === 0" size="small" type="success">系统</el-tag>
                    <el-tag v-else size="small" type="danger">商户</el-tag>
      			</template>
            </el-table-column>
      <!--       <el-table-column prop="id" label="公告ID" header-align="center" align="center"></el-table-column> -->
     <!--        <el-table-column prop="merchantid" label="所属商户ID" header-align="center" align="center"></el-table-column> -->
            <el-table-column prop="merchantname" label="所属商户名称" header-align="center" align="center"></el-table-column>
            <el-table-column prop="noticeTitle" label="公告标题" header-align="center" align="center"></el-table-column>
        <!--     <el-table-column prop="noticeMessage" label="公告内容" header-align="center" align="center"></el-table-column> -->
<!--             <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column> -->
            <el-table-column prop="createtime" label="创建时间" header-align="center" align="center"></el-table-column>
<!--             <el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>
            <el-table-column prop="updatetime" label="更新时间" header-align="center" align="center"></el-table-column> -->
            <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
              <template slot-scope="scope">
    <!--             <el-button v-if="$hasPermission('pay:notice:update')" type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> -->
                <el-button v-if="$hasPermission('pay:notice:delete')" type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="limit"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="pageSizeChangeHandle"
            @current-change="pageCurrentChangeHandle">
          </el-pagination>
          <!-- 弹窗, 新增 / 修改 -->
          <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refresh-data-list="getDataList"></add-or-update>
        </div>
      </el-card>
    </div>
  </div>
</div>
<#include "/footer.html">
<script src="${request.contextPath}/statics/js/modules/pay/notice.js?_${.now?long}"></script>
</body>
</html>
